<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动元素一行显示</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .two {
            background-color: purple;
        }
        .four {
            background-color: burlywood;
        }
    </style>
</head>
<body>
   <div>1</div>
   <div class="two">2</div>
   <div>3</div>
   <div class="four">4</div>
   <!-- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列 -->
</body>
</html>
<!-- 
    注意：
    浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
 -->